<script setup></script>

<template>
  <view class="container">
    <uni-card :border="false" :is-shadow="false" margin="0" padding="0" spacing="0">
      <view style="display: flex; align-items: center">
        <text class="titleText">审批详情</text>
      </view>
      <view class="infoContainer">
        <text class="infoTitle">报销类型</text>
        <text class="infoText">差旅费</text>
      </view>
      <view class="infoContainer">
        <text class="infoTitle">报销事由</text>
        <text class="infoText">事由内容</text>
      </view>
      <view class="infoContainer">
        <text class="infoTitle">费用汇总</text>
        <text class="infoText">1,600.00</text>
      </view>
      <view class="infoContainer">
        <text class="infoTitle">费用明细1</text>
        <view class="costDetailContainer">
          <view class="insider">
            <text class="costTitle">内容</text>
            <text class="costText">测试2</text>
          </view>
          <view class="insider">
            <text class="costTitle">日期</text>
            <text class="costText">2024-12-16</text>
          </view>
          <view class="insider">
            <text class="costTitle">金额</text>
            <text class="costText">800.00 元</text>
          </view>
        </view>
      </view>
      <view class="infoContainer">
        <text class="infoTitle">费用明细2</text>
        <view class="costDetailContainer">
          <view class="insider">
            <text class="costTitle">内容</text>
            <text class="costText">测试3</text>
          </view>
          <view class="insider">
            <text class="costTitle">日期</text>
            <text class="costText">2024-12-16</text>
          </view>
          <view class="insider">
            <text class="costTitle">金额</text>
            <text class="costText">800.00 元</text>
          </view>
        </view>
      </view>
    </uni-card>
  </view>
</template>

<style lang="scss" scoped>
.container {
  width: 686rpx;
  background-color: #ffffff;
  margin: 0 32rpx 32rpx 0;
  padding: 32rpx;
  border-radius: 16rpx;
}

.titleText {
  color: #1d2129;
  text-align: center;
  font-family: 'PingFang SC';
  font-size: 32rpx;
  font-style: normal;
  font-weight: 500;
  line-height: 44.8rpx;
}

.infoContainer {
  margin-top: 32rpx;
}

.infoTitle {
  display: block;
  align-self: stretch;
  color: #86909c;
  font-family: 'PingFang SC';
  font-size: 28rpx;
  font-style: normal;
  font-weight: 400;
  line-height: 39.2rpx;
}

.infoText {
  margin-top: 8rpx;
  display: block;
  align-self: stretch;
  color: #1d2129;
  font-family: 'PingFang SC';
  font-size: 28rpx;
  font-style: normal;
  font-weight: 400;
  line-height: 39.2rpx;
}

.costDetailContainer {
  margin-top: 16rpx;
  display: flex;
  padding: 16rpx 32rpx;
  flex-direction: column;
  align-items: flex-start;
  gap: 24rpx;
  align-self: stretch;
  border-radius: 16rpx;
  background: var(---fill-2, #f2f3f5);
}

.costTitle {
  display: block;
  align-self: stretch;
  color: #86909c;
  font-family: 'PingFang SC';
  font-size: 28rpx;
  font-style: normal;
  font-weight: 400;
  line-height: 39.2rpx;
}

.costText {
  margin-top: 8rpx;
  display: block;
  align-self: stretch;
  color: #1d2129;
  font-family: 'PingFang SC';
  font-size: 28rpx;
  font-style: normal;
  font-weight: 400;
  line-height: 39.2rpx;
}

.insider {
  margin-top: 8rpx;
}
</style>
